<template>
  <div class="app-container">
    <nav>
      <ul>
        <li
          v-for="item in navList"
          :key="item.key"
          :class="{ isActive: activeType == item.key }"
          @click="changeNav(item)"
        >
          {{ item.value }}
        </li>
      </ul>
    </nav>
    <main class="main-container">
      <router-view></router-view>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeType: "taskList",
      navList: [
        {
          key: "taskList",
          value: "任务列表",
        },
        {
          key: "msgCenter",
          value: "消息中心",
        },
        {
          key: "targetPlan",
          value: "目标计划",
        },
      ],
    };
  },
  methods: {
    changeNav(item) {
      this.activeType = item.key;
      this.$router.push("/" + item.key);
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  display: flex;
  flex-direction: column;
  height: 100%;

  nav {
    padding: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 3px 3px #ddd;

    ul {
      list-style: none;
      display: flex;
      justify-content: center;
      align-items: center;

      li {
        margin: 8px;
        font-size: 18px;
        color: rgba(0, 0, 0, 0.5);

        &:hover {
          color: black;
          cursor: pointer;
        }
      }

      .isActive {
        color: rgba(0, 0, 0, 0.8);
      }
    }
  }
  main {
    height: 100%;
    width: 100%;
    display: flex;
    position: relative;
    will-change: width;
    box-sizing: border-box;
    overflow: hidden;
    margin-top: 8px;
  }
}
</style>
